
.panelRendererValueBoxed, .panelRendererValueBoxed .background-inherit {
    background: var(--component-background-color);
}


/*common scheme*/
.cell-with-background,
.cell-with-background .background-inherit,
/*hack to increase selectivity (assuming that cell-with-background is always panelRendererValueBoxed)*/
.panelRendererValueBoxed.cell-with-background,
.panelRendererValueBoxed.cell-with-background .background-inherit {
    background-color: var(--bs-table-bg);
}

.panelRendererValueBoxed {
    border: 1px solid var(--component-border-color); /* should correspond to the result in ActionOrPropertyValue.setBaseSize */
}

.propertyPanelRendererValue.panelRendererValueBoxed {
    border-radius: var(--textfield-border-radius);
    overflow: hidden; /* to hide inner corners */
}

.actionPanelRendererValue.panelRendererValueBoxed {
    border-radius: var(--button-border-radius);
}

.panelRendererValueFocused.panelRendererValueBoxed:not(.panelRendererValueEdited),
.panelRendererValueFocused.panelRendererValueBoxed:not(.panelRendererValueEdited) .background-inherit, button:focus {
    background-color: var(--selection-color);
}

.panelRendererValueFocused.panelRendererValueBoxed, .actionPanelRendererValue:focus {
    border: 1px solid var(--focus-color);
}

.panelRendererValueBoxed:hover:not(.panelRendererValueFocused), .actionPanelRendererValue:hover:not(focus) { /* we want focus to have higher priority than hover*/
    border: 1px solid var(--component-hover-border-color);
}

/* border doesn't work for input checkbox */
input[type=checkbox].panelRendererValueFocused.panelRendererValueBoxed {
    outline: 1px solid var(--focus-color);

    /* this is needed because Chrome has the default outline-offset set to 2 for :focus-visible input checkbox  */
    /* https://stackoverflow.com/questions/73049600/should-input-checkbox-outline-include-margins-or-not */
    outline-offset: 0;
}
input[type=checkbox].panelRendererValueBoxed:hover:not(.panelRendererValueFocused), .actionPanelRendererValue:hover:not(focus) { /* we want focus to have higher priority than hover*/
    outline: 1px solid var(--component-hover-border-color);
}

.panelRendererValueBinding, .panelRendererValueBinding .background-inherit {
    background-color: var(--button-active-background-color);
}

/*prevents all click for 3-state boolean 'disabled' value, click will be catched by upper element*/
.logicalRendererCheckBox:disabled {
    pointer-events: none;
}